<!--
 * Copyright © 2025 上海火金网络科技有限公司. All rights reserved.
 * Payment App Config Detail - 支付应用配置详情页面
 *
 * 功能：展示支付应用配置的详细信息
 * 版本：1.0.0
 *
 * Website: https://www.anypay.com
-->

<template>
  <a-modal
    v-model:open="modalVisible"
    title="支付应用配置详情"
    centered
    :footer="null"
    @cancel="closeModal"
    :width="600"
    wrapClassName="payment-app-config-detail-modal"
  >
    <div class="payment-app-config-detail-content" v-if="itemDetail">
      <!-- 应用头部信息 -->
      <div class="payment-app-config-header">
        <div class="payment-app-config-icon">
          <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
            <rect width="48" height="48" rx="8" :fill="getAppTypeIconColor(itemDetail.appType)"/>
            <path d="M16 18h16v2H16v-2zm0 4h16v2H16v-2zm0 4h12v2H16v-2z" fill="white"/>
            <path d="M14 14h20a2 2 0 012 2v16a2 2 0 01-2 2H14a2 2 0 01-2-2V16a2 2 0 012-2z" stroke="white" stroke-width="1.5" fill="none"/>
          </svg>
        </div>
        <div class="payment-app-config-info">
          <div class="payment-app-config-title">
            <span class="payment-app-config-name">{{ itemDetail.appName || '支付应用' }}</span>
            <a-tag
              :color="itemDetail.status === 0 ? undefined : getStatusColor(itemDetail.status)"
              :class="itemDetail.status === 0 ? 'status-disabled' : ''"
            >
              {{ getStatusText(itemDetail.status) }}
            </a-tag>
          </div>
          <div class="payment-app-config-id">{{ itemDetail.appId }}</div>
        </div>
      </div>

      <!-- 基本信息 -->
      <div class="info-section info-section-with-bg">
        <h3 class="section-title">基本信息</h3>
        <div class="info-content">
          <div class="info-item">
            <span class="info-label">应用ID</span>
            <span class="info-value">{{ itemDetail.appId }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">应用名称</span>
            <span class="info-value">{{ itemDetail.appName }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">商户ID</span>
            <span class="info-value">{{ itemDetail.merchantId }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">应用类型</span>
            <span class="info-value">
              <a-tag :color="getAppTypeColor(itemDetail.appType)">
                {{ getAppTypeText(itemDetail.appType) }}
              </a-tag>
            </span>
          </div>
          <div class="info-item">
            <span class="info-label">连接模式</span>
            <span class="info-value">
              <a-tag :color="getConnectModeColor(itemDetail.connectMode)">
                {{ getConnectModeText(itemDetail.connectMode) }}
              </a-tag>
            </span>
          </div>
          <div class="info-item">
            <span class="info-label">应用状态</span>
            <span class="info-value">
              <a-tag
                :color="itemDetail.status === 0 ? undefined : getStatusColor(itemDetail.status)"
                :class="itemDetail.status === 0 ? 'status-disabled' : ''"
              >
                {{ getStatusText(itemDetail.status) }}
              </a-tag>
            </span>
          </div>
        </div>
      </div>

      <!-- URL配置 -->
      <div class="info-section info-section-with-bg">
        <h3 class="section-title">URL配置</h3>
        <div class="info-content">
          <div class="info-item">
            <span class="info-label">通知地址</span>
            <span class="info-value">
              <a v-if="itemDetail.notifyUrl" :href="itemDetail.notifyUrl" target="_blank" class="url-link">
                {{ itemDetail.notifyUrl }}
              </a>
              <span v-else class="no-data">未配置</span>
            </span>
          </div>
          <div class="info-item">
            <span class="info-label">返回地址</span>
            <span class="info-value">
              <a v-if="itemDetail.returnUrl" :href="itemDetail.returnUrl" target="_blank" class="url-link">
                {{ itemDetail.returnUrl }}
              </a>
              <span v-else class="no-data">未配置</span>
            </span>
          </div>
        </div>
      </div>

      <!-- 安全配置 -->
      <div class="info-section info-section-with-bg" v-if="itemDetail.securityConfig">
        <h3 class="section-title">安全配置</h3>
        <div class="info-content">
          <div class="security-config-container">
            <pre class="security-config-json">{{ formatSecurityConfig(itemDetail.securityConfig) }}</pre>
          </div>
        </div>
      </div>

      <!-- 时间信息 -->
      <div class="info-section info-section-with-bg">
        <h3 class="section-title">时间信息</h3>
        <div class="info-content">
          <div class="info-item">
            <span class="info-label">创建时间</span>
            <span class="info-value">{{ formatDate(itemDetail.createdTime) }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">最近修改</span>
            <span class="info-value">{{ formatDate(itemDetail.updatedTime) }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 空数据状态 -->
    <div v-else class="empty-state">
      <a-empty description="暂无数据" />
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const modalVisible = ref(false);
const itemDetail = ref<any>(null);

// 格式化日期
function formatDate(dateString: string) {
  if (!dateString) return '未知';
  try {
    const date = new Date(dateString);
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    });
  } catch (error) {
    return dateString;
  }
}

// 格式化安全配置
function formatSecurityConfig(configString: string) {
  if (!configString) return '暂无配置';
  try {
    const config = JSON.parse(configString);
    return JSON.stringify(config, null, 2);
  } catch (error) {
    return configString;
  }
}

// 获取应用类型文本
function getAppTypeText(appType: number) {
  switch (appType) {
    case 1: return 'CASHIER收银台';
    case 2: return 'MOBILE_PAY移动支付';
    case 3: return 'WEB_PAY网页支付';
    case 4: return 'API_PAY';
    default: return '未知类型';
  }
}

// 获取应用类型颜色
function getAppTypeColor(appType: number) {
  switch (appType) {
    case 1: return 'blue';
    case 2: return 'green';
    case 3: return 'orange';
    case 4: return 'purple';
    default: return 'default';
  }
}

// 获取应用类型图标颜色
function getAppTypeIconColor(appType: number) {
  switch (appType) {
    case 1: return '#4F7CFF'; // 蓝色
    case 2: return '#52C41A'; // 绿色
    case 3: return '#FA8C16'; // 橙色
    case 4: return '#722ED1'; // 紫色
    default: return '#4F7CFF';
  }
}

// 获取连接模式文本
function getConnectModeText(connectMode: number) {
  switch (connectMode) {
    case 1: return '直连';
    case 2: return '间连';
    default: return '未知模式';
  }
}

// 获取连接模式颜色
function getConnectModeColor(connectMode: number) {
  switch (connectMode) {
    case 1: return 'blue';
    case 2: return 'green';
    default: return 'default';
  }
}

// 获取状态文本
function getStatusText(status: number) {
  switch (status) {
    case 0: return '停用';
    case 1: return '启用';
    case 2: return '审核中';
    default: return '未知状态';
  }
}

// 获取状态颜色
function getStatusColor(status: number) {
  switch (status) {
    case 1: return 'green';
    case 2: return 'orange';
    default: return 'default';
  }
}

function openModal(item: any) {
  itemDetail.value = item;
  modalVisible.value = true;
}

function closeModal() {
  modalVisible.value = false;
  itemDetail.value = null;
}

defineExpose({ openModal });
</script>

<style scoped>
.payment-app-config-detail-modal :deep(.ant-modal-content) {
  padding: 0;
  border-radius: 12px;
}

.payment-app-config-detail-modal :deep(.ant-modal-header) {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 12px 12px 0 0;
}

.payment-app-config-detail-modal :deep(.ant-modal-title) {
  font-size: 18px;
  font-weight: 600;
  color: #262626;
}

.payment-app-config-detail-modal :deep(.ant-modal-body) {
  padding: 0;
}

.payment-app-config-detail-content {
  padding: 24px;
}

.payment-app-config-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.payment-app-config-icon {
  flex-shrink: 0;
}

.payment-app-config-info {
  flex: 1;
}

.payment-app-config-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.payment-app-config-name {
  font-size: 18px;
  font-weight: 600;
  color: #262626;
  line-height: 1.4;
}

.payment-app-config-id {
  font-size: 14px;
  color: #8c8c8c;
  line-height: 1.4;
}

.info-section {
  margin-bottom: 32px;
}

.info-section:last-child {
  margin-bottom: 0;
}

.info-section-with-bg {
  background-color: #fafafa;
  border-radius: 8px;
  padding: 16px;
  position: relative;
}

.info-section-with-bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background-color: #e8e8e8;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 12px;
  line-height: 1.4;
}

.info-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  padding: 5px 0;
}

.info-label {
  flex-shrink: 0;
  width: 120px;
  font-size: 13px;
  color: #595959;
  line-height: 1.5;
  font-weight: 400;
}

.info-value {
  flex: 1;
  font-size: 13px;
  color: #262626;
  line-height: 1.5;
  word-break: break-all;
}

.info-value:empty::before {
  content: '待添加';
  color: #bfbfbf;
}

.url-link {
  color: #1890ff;
  text-decoration: none;
}

.url-link:hover {
  text-decoration: underline;
}

.no-data {
  color: #999;
  font-style: italic;
}

/* 安全配置样式 */
.security-config-container {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 16px;
  max-height: 200px;
  overflow-y: auto;
}

.security-config-json {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  color: #333;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
}

/* 停用状态样式 */
.status-disabled {
  background-color: rgba(140, 140, 140, 0.1) !important;
  border-color: #8c8c8c !important;
  color: #8c8c8c !important;
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 40px 20px;
}
</style>